<template>
	<view>
		<view class="combo-package" :class="isIphoneX ? 'combo-iphoneX' : ''">
			<view class="combo-package-list">
				<view v-for="(item, index) in goodsList" :key="index" class="combo-package-content">
					<view class="combo-package-name ns-text-color-black ns-bg-color-gray-fadeout-60" @click="radioChange(index, item)">
						<view class="iconfont" :class="index === current ? 'iconyuan_checked' : 'iconyuan_checkbox'"></view>
						<text class="ns-margin-right">{{ item.combo_package_name }}</text>
						<text>
							套餐价：
							<text class="ns-text-color uni-bold">{{ item.combo_package_price }}</text>
						</text>
					</view>

					<navigator class="goods-info ns-border-color-gray-fadeout-50 border-bottom" :url="'/pages/goods/detail/detail?goods_id=' + item.main_goods.goods_id">
						<view class="goods-img">
							<view class="img-wrap"><image :src="$util.img(item.main_goods.pic_cover_mid)" class="lazy_load pic"></image></view>
						</view>
						<view class="data-info">
							<view class="goods-name">{{ item.main_goods.goods_name }}</view>
							<view class="price uni-bold ns-text-color">￥{{ item.main_goods.price }}</view>
							<view v-if="item.main_goods && item.main_goods.sku_info" class="select-sku ns-text-color-gray">
								<text class="sku" v-if="item.main_goods.sku_info.sku_name != ''">已选规格：{{ item.main_goods.sku_info.sku_name }}</text>
							</view>
						</view>
					</navigator>
					<navigator
						v-for="(todo, child_index) in item.goods_array"
						:key="child_index"
						class="goods-info  border-bottom"
						:url="'/pages/goods/detail/detail?goods_id=' + todo.goods_id"
					>
						<view class="goods-img">
							<view class="img-wrap"><image :src="$util.img(todo.pic_cover_mid)" class="lazy_load pic"></image></view>
						</view>
						<view class="data-info">
							<view class="goods-name">{{ todo.goods_name }}</view>
							<view class="price uni-bold ns-text-color">￥{{ todo.price }}</view>
							<view class="select-sku ns-text-color-gray" v-if="todo.sku_info">
								<text class="sku" v-if="todo.sku_info.sku_name != ''">已选规格：{{ todo.sku_info.sku_name }}</text>
							</view>
						</view>
					</navigator>
				</view>
			</view>

			<view class="footer" :class="isIphoneX ? 'padding-bottom' : ''">
				<view class="combo-package-info">
					<view>
						<text class="package-price">套餐价：</text>
						<text class="ns-text-color uni-bold" id="package_price">￥{{ packagePrice }}</text>
					</view>
					<view>
						<text>原价</text>
						<text class="original-price ">￥{{ originalPrice }}</text>
						<text class="save-the-price">已节省￥{{ saveThePrice }}</text>
					</view>
				</view>
				<button :type="!isDisabled ? 'primary' : 'default'" @click="comboBuy()" class="button" :class="!isDisabled ? '' : 'ns-text-color-gray'">立即购买</button>
			</view>
		</view>
		<ns-login ref="login" href="combo"></ns-login>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import nsLogin from 'components/ns-login/ns-login.vue';
export default {
	components: {
		nsLogin
	},
	data() {
		return {
			num: 1, //购买数量
			current: 0, //当前套餐下标
			goodsId: 0, //商品id
			goodsList: [], //套餐列表
			skuIdArray: [], //当前套餐skuid 列表
			originalPrice: 0, //原价
			packagePrice: 0, //套餐价
			saveThePrice: 0, //节省价格
			isDisabled: false, //按钮失效
			comboId: 0, //当前套餐id
			orderType: 1, //订单类型 1 普通订单	4 拼团订单	6 预售订单	7 砍价订单
			promotionType: 1, //1 组合套餐	2 团购	3 砍价,
			btnSwitch: true,
			isIphoneX: false //判断是否是iphoneX以上的设备
		};
	},
	onLoad(e) {
		this.goodsId = e.goods_id || 0;
		uni.getSystemInfo({
			success: res => {
				if (res.model.search('iPhone X') != -1) {
					this.isIphoneX = true;
				}
			}
		});
	},
	onShow() {
		this.getList();
	},
	onHide() {
		this.btnSwitch = true;
	},
	mixins: [http],
	methods: {
		// 获取套餐列表
		getList() {
			this.sendRequest({
				url: 'NsCombopackage.ComboPackage.comboPackageGoodsQuery',
				data: {
					goods_id: this.goodsId
				},
				success: res => {
					if (res.code == 0) {
						this.goodsList = res.data;
						this.radioChange(0, this.goodsList[0]);
					}
				}
			});
		},
		// 监听单选框事件
		radioChange(index, item) {
			this.current = index;
			this.packagePrice = parseFloat(item.combo_package_price).toFixed(2);
			// 原价计算
			var original_price = 0;
			for (var i = 0; i < item.goods_array.length; i++) {
				original_price += parseFloat(item.goods_array[i].sku_list[0].price);
			}
			original_price += parseFloat(item.main_goods.sku_list[0].price);
			this.originalPrice = parseFloat(original_price).toFixed(2);
			var save_the_price = parseFloat(this.originalPrice - this.packagePrice).toFixed(2);
			this.saveThePrice = save_the_price < 0 ? 0 : save_the_price;
			// skuid数组
			var skuId_array = [];
			if (item.main_goods.sku_info) {
				var main_goods_sku_info = item.main_goods.sku_info;
				var main_goods_skuid = main_goods_sku_info.sku_id;
				skuId_array.push(main_goods_skuid);
			} else if (item.main_goods.sku_list) {
				skuId_array.push(item.main_goods.sku_list[0].sku_id);
			}

			this.isDisabled = item.main_goods.stock == 0;

			for (var i = 0; i < item.goods_array.length; i++) {
				var info = item.goods_array[i].sku_info;
				var list = item.goods_array[i].sku_list;
				var stock = 0;
				if (info) {
					skuId_array.push(info.sku_id);
					stock = info.stock;
				} else if (list) {
					skuId_array.push(list[0].sku_id);
					stock = list[0].stock;
				}

				this.isDisabled = stock == 0;
			}

			this.skuIdArray = skuId_array;
			this.comboId = item.id;
		},
		// 套餐立即购买点击
		async comboBuy() {
			var isLogin = false;
			// #ifdef H5
			getApp().checkLogin(() => {
				isLogin = true;
				setTimeout(() => {
					this.$refs.login.clickLogin();
				}, 100);
			});
			// #endif
			// #ifdef MP
			getApp().$vm.checkLogin(() => {
				isLogin = true;
				this.$refs.login.clickLogin();
			});
			// #endif

			if (isLogin) return;

			if (this.isDisabled) return;

			if (this.btnSwitch == false) {
				return;
			}

			this.btnSwitch = false;
			var goods_sku_list = [];
			for (var i = 0; i < this.skuIdArray.length; i++) {
				goods_sku_list.push(this.skuIdArray[i] + ':' + this.num);
			}

			var data = JSON.stringify({
				order_type: this.orderType, // 1 普通订单	4 拼团订单	6 预售订单	7 砍价订单
				promotion_type: this.promotionType, //1 组合套餐	2 团购	3 砍价
				goods_sku_list: goods_sku_list.toString(),
				promotion_info: {
					combo_package_info: {
						combo_package_id: this.comboId,
						buy_num: this.num
					}
				}
			});
			uni.setStorage({
				key: 'orderCreateData',
				data: data,
				success: () => {
					this.$util.redirectTo('/pages/order/payment/payment');
				}
			});
		}
	}
};
</script>

<style lang="scss">
.uni-bold {
	font-weight: bold;
}
.combo-package {
	padding-bottom: 100rpx;
	background: $page-color-base;
}
.combo-iphoneX {
	padding-bottom: 170rpx;
}
.combo-package-content {
	padding-bottom: 40rpx;
}

.combo-package-content .combo-package-name {
	padding: 16rpx 20rpx;
	background: #ffffff;
	.iconfont {
		display: inline-block;
		font-size: 50rpx;
		vertical-align: middle;
		margin-right: 20rpx;

		&.iconyuan_checked {
			color: $base-color;
		}
		&.iconyuan_checkbox {
			color: $ns-text-color-gray;
		}
	}
}

.combo-package-content .goods-info {
	overflow: hidden;
	margin: 20rpx;
	padding: $ns-padding;
	background: #ffffff;
	border-radius: $ns-border-radius;
}

.combo-package-content .goods-info:last-child {
	margin-bottom: 0;
}

.combo-package-content .goods-info .goods-img {
	display: inline-block;
	width: 30%;
	text-align: center;
	line-height: 100%;
	float: left;
}

.combo-package-content .goods-info .goods-img .img-wrap {
	display: inline-block;
	width: 100%;
	padding: 50% 0;
	text-align: center;
	position: relative;
}

.combo-package-content .goods-info .goods-img .img-wrap .pic {
	height: 100%;
	width: 100%;
	/* height: auto; */
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
}

.combo-package-content .goods-info .data-info {
	display: inline-block;
	width: 66%;
	float: left;
	position: relative;
	margin-left: 20rpx;
}

.combo-package-content .goods-info .data-info .goods-name {
	height: 78rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	line-height: 150%;
	margin-bottom: 20rpx;
}

.combo-package-content .goods-info .data-info .price {
	height: 50rpx;
	line-height: 50rpx;
}

.combo-package-content .goods-info .data-info .select-sku {
	height: 50rpx;
	line-height: 50rpx;
	font-size: 24rpx;
}

.combo-package-content .goods-info .data-info .select-sku .sku {
	width: 90%;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.combo-package-content .goods-info .data-info .select-sku .right {
	float: right;
	position: relative;
	line-height: 50rpx;
	font-size: 20rpx;
}

.combo-package .footer {
	width: 100%;
	height: 100rpx;
	background: #fff;
	position: fixed;
	bottom: 0;
	display: flex;
}

.combo-package .footer .combo-package-info {
	width: 70%;
}

.combo-package .footer .combo-package-info view {
	height: 50rpx;
	padding-left: 20rpx;
}

.combo-package .footer .combo-package-info view .package-price {
	margin-top: 10rpx;
	display: inline-block;
}

.combo-package .footer .combo-package-info view .original-price {
	white-space: nowrap;
	margin-right: 20rpx;
	text-decoration: line-through;
}

.combo-package .footer .combo-package-info view .save-the-price {
	display: inline-block;
}

.combo-package .footer .button {
	width: 30%;
	line-height: 100rpx;
	height: 100rpx;
	margin: 0;
	border-radius: 0;
}

.combo-package .footer + div {
	height: 100rpx;
}

.combo-package .widgets-cover {
	position: fixed;
	top: 40%;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s 80ms;
	will-change: opacity;
}

.combo-package .widgets-cover.show {
	pointer-events: auto;
	opacity: 1;
}

.combo-package .widgets-cover .cover-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background-color: #fff;
	-webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 80ms;
	transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 80ms;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
	will-change: transform;
	box-shadow: 0 -1px 40px rgba(0, 0, 0, 0.3);
}

.combo-package .widgets-cover.show .cover-content {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.combo-package .sku-wrap {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.combo-package .sku-wrap .header {
	padding: 20rpx 0 20rpx 252rpx;
	position: relative;
}

.combo-package .sku-wrap .header .img-wrap {
	width: 208rpx;
	height: 208rpx;
	position: absolute;
	top: -56rpx;
	left: 20rpx;
	border-radius: 8rpx;
	overflow: hidden;
	border: 2rpx solid;
	padding: 2rpx;
	line-height: 208rpx;
}

.combo-package .sku-wrap .header .img-wrap image {
	width: 100%;
	height: 100%;
}

.combo-package .sku-wrap .header .main {
	font-size: 24rpx;
	line-height: 40rpx;
	padding-right: 40rpx;
}

.combo-package .sku-wrap .header .main .price {
	font-size: 32rpx;
	word-wrap: break-word;
}

.combo-package .sku-wrap .header .main .sku-info {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	height: 72rpx;
	overflow: hidden;
}

.combo-package .sku-wrap .header .main .sku-info text {
	margin-right: 10rpx;
}

.combo-package .sku-wrap .header .sku-close {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	width: 40rpx;
	height: 40rpx;
}

.combo-package .sku-wrap .body {
	padding: 0 30rpx 20rpx;
	position: absolute;
	bottom: 96rpx;
	top: 186rpx;
	left: 0;
	right: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.combo-package .sku-wrap .footer {
	height: 96rpx;
	text-align: center;
	line-height: 96rpx;
	color: #fff;
	width: 100%;
	position: absolute;
	bottom: 0;
	font-size: 30rpx;
}

.combo-package .sku-wrap .footer:active {
	opacity: 0.8;
}

.border-bottom {
	border-bottom: 1px solid rgba(229, 229, 229, 0.5);
}
.padding-bottom {
	padding-bottom: 68rpx;
}
</style>
